{% stylesheet %}
.block_collection .block_collection_items ul {
    display: grid;
    row-gap: 30px;
    column-gap: 30px;
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
}

.block_collection .block_collection_items_4 ul {
    grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_collection .block_collection_items_5 ul {
    grid-template-columns: repeat(5, calc(20% - 24px));
}

.block_collection .block_collection_items li {
    list-style-type: none;
}

.block_collection .block_collection_content {
    display: block;
    width: 100%;
    position: relative;
}
.block_collection .block_collection_content .block_collection_pic{
    width: 100%;
    height: 100%;
    margin-bottom: 8px;
    transition: all 0.3s;
}
.block_collection .block_collection_content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.block_collection .block_collection_content .block_collection_pic:hover{
    box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.2);
}

.block_collection .block_collection_name {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
}

.block_collection .block_collection_more {
    margin-top: calc(var(--general_layout_spacing) * 0.5);
    text-align: center;
}

.block_collection .block_collection_more a {
    margin: 0;
}

@media (max-width: 768px) {
    .block_collection .block_collection_items ul {
        row-gap: 30px;
        column-gap: 30px;
        grid-template-columns: repeat(2, calc(50% - 15px));
    }
}

@media (max-width: 767px) {
    .block_collection .block_collection_items ul {
        row-gap: 14px;
        column-gap: 14px;
        grid-template-columns: repeat(2, calc(50% - 7px));
    }
    .block_collection .block_collection_name{
        font-size: 16px;
    }
}
{% endstylesheet %}
<div class="block_collection" id="block_collection_{{ block.id }}"> 
    <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_collection_items block_collection_items_{{ section.settings.pc_number }}">
            <ul class="grid-warp" style="--template-columns:{{ section.settings.pc_number }};--grid-column:30px;--grid-row:30px">
              {% assign collection_ids = section.blocks | get_array_values: "collection" | get_array_values: "id" | join: "," %}
                {% if section.blocks.size %}


                {% get_collections ids = {collection_ids} limit=100 %}
                {% for block in section.blocks %}
                {% assign id = block.collection.id %}

                {% if collections[id].size > 1 %}
                  {% assign collection = collections[id] %}
                  <li>
                    <a class="block_collection_content" href="/collections/{{ collection.handle }}">
                        <div class="block_collection_pic">
                          <img data-src="{{collection.src}}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ collection.title }}">
                        </div>
                        <div class="block_collection_name">{{ collection.title }}</div>
                    </a>
                </li>
                {% else %}
                <li>
                    <a href="javascript:;" data-tips="请选择专辑" class="block_collection_content">
                        <div class="block_collection_pic"><img src="{{ 'empty.png' | public_asset_abs_url }}"></div>
                        <div class="block_collection_name">Example Collection Title</div>
                    </a>
                </li>
                {% endif %}
                
                {% endfor %}

                {% else %}
                {% for i in (1..section.settings.pc_number) %}
                  <li>
                    <a href="javascript:;" data-tips="请选择专辑" class="block_collection_content">
                        <div class="block_collection_pic"><img src="{{ 'empty.png' | public_asset_abs_url }}"></div>
                        <div class="block_collection_name">Example Collection Title</div>
                    </a>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
            {% if section.settings.more_text !='' %}
            <div class="block_collection_more"><a class="secondary_btn" href="/collections">{{ section.settings.more_text }}</a></div>
            {% endif %}
        </div>
    </div>
</div>
{% schema %}
{
  "tag": "section",
  "class": "block_collection",
  "is_global": false,
  "name": {
    "zh_CN": "专辑列表"
  },
  "max_blocks": "20",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "placeholder": {
        "zh_CN": "请输入标题"
      },
      "default": "Collection List"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述"
      },
      "placeholder": {
        "zh_CN": "请输入描述"
      },
      "default": "Collection Detail"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "is_fill",
      "default": "false"
    },
    {
      "type": "card_slider",
      "id": "pc_number",
      "max": "5",
      "min": "3",
      "label": {
        "zh_CN": "PC每排数量"
      },
      "default": "3"
    },
    {
      "type": "card_input",
      "id": "more_text",
      "label": {
        "zh_CN": "查看更多文案"
      }
    }
  ],
  "blocks": [
    {
      "name": {
        "zh_CN": "选择专辑"
      },
      "type": "collection-item",
      "settings": [
        {
          "type": "card_collection",
          "label": {
            "zh_CN": "专辑"
          },
          "default": {
            "id": "",
            "title": ""
          },
          "id": "collection"
        }
      ]
    }
  ],
  "default": {
    "settings": {
      "title": "Collection List",
      "detail": "",
      "is_fill": false,
      "scale": "11",
      "pc_number": "5",
      "more_text": ""
    },
    "blocks": [
      {
        "collection": {
          "id": "",
          "title": ""
        },
        "block_type": "collection-item"
      },
      {
        "collection": {
          "id": "",
          "title": ""
        },
        "block_type": "collection-item"
      },
      {
        "collection": {
          "id": "",
          "title": ""
        },
        "block_type": "collection-item"
      },
      {
        "collection": {
          "id": "",
          "title": ""
        },
        "block_type": "collection-item"
      },
      {
        "collection": {
          "id": "",
          "title": ""
        },
        "block_type": "collection-item"
      }
    ]
  }
}
{% endschema %}